<template>
    <div class="home-wrap">
        <router-link to="/setPos">
            {{address}}
        </router-link>
        <my-bscroll class="home-con" ref="bScroll"
            :scrollY="true"
            :pullUpLoad="pullUpLoad"
            @getShopList="getShopList"
        >
            <div class="swiper-container">
                <div class="swiper-wrapper"  ref="com">
                    <div class="swiper-slide" v-for="(item,i) in bannerList" :key="i"> 
                        {{i}}
                        <img :src="item.image" :alt="item.active_name">
                    </div>
                </div>
            </div>
            <div class="product-list">
                <my-shop-item v-for="(item,i) in shopList" :key="i"
                    :cover="item.cover"
                    :id="item.id"
                ></my-shop-item>
            </div>
            <div slot="loading" v-show="pageid!=maxNum">
                loading=====
            </div>
        </my-bscroll>
        
        
    </div>
</template>
<script>
import Swiper from 'swiper'
export default {
    data() {
        return {
            bannerList:[], //banner数据
            pageid:0,      //页码
            limit:10,       //每页的条数
            shopList:[],    //商品列表
            pullUpLoad:{
                threshold: -50  //上拉超过50，加载下一页数据
            },
            maxNum:2,       //一共有2页数据
            address:''
        }
    },
    activated(){
        this.address = localStorage.getItem('positionData');
    },
    created(){  //尽量不放逻辑
        //初始化数据
        this.initData();
    },
    methods:{
        async initData(){
            //获取banner数据
            let result = await this.$http.getBanner();
            this.bannerList = result.data;
            //获取商品列表
            this.getShopList();

            this.$nextTick(() => {  //dom渲染完毕
                new Swiper ('.swiper-container');
            })
        },
        async getShopList(){
            //不符合条件
            if(this.pageid >= this.maxNum){
                this.$alert('没有更多数据');
                this.pullUpLoad = false; //禁用上拉加载
                return;
            }
            if(this.shopList.length){
                this.pageid += 1;
            }
            
            //请求第一页的数据
            let data = await this.$http.getShopList({pageid:this.pageid,limit:this.limit});
            this.shopList = this.shopList.concat(data.data);  //注
        }
    }
}
</script>

<style scoped lang="scss">
    img{
        width:100%;
        height: 140px;
        background: red;
    }

    .home-wrap{
        @include size(100%,100%);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .home-con{
        width:100%;
        flex:1;
        overflow: hidden;
    }  
</style>
